.s-intro {

  @include breakpoint(xlarge) {

    .wr {
      position: relative;

      &:before,
      &:after {
        display: block;
        position: absolute;
        height: 435px;
        background: url('../img/intro_bg.png') no-repeat 0 0;
        background-size: auto 100%;
        content: '';
      }

      &:before {
        left: 0;
        top: -25%;
        width: 20vw;
        background-position: right 0 top 0;
      }

      &:after {
        right: 0;
        top: 25%;
        width: 25vw;
      }
    }
  }
}

.s-benefits { 
  .title-2 {
    margin-bottom: 2em;
  }

  @include breakpoint(large) {
    padding-bottom: 0;
    .title-2 {
      margin-bottom: 4em;
    }
  }
}

.benefits-list {
  counter-reset: title;

  .item {
    margin-bottom: 50px;

    .description {
      margin-left: 30px;
      a {
        font-weight: 600;
        color: $secondary-color;
        &:hover {
          color: $anchor-color;
        }
      }
    }
  }

  .title-3 {
    &:before {
      color: $primary-color;
      counter-increment: title;
      content: '0'counter(title) '. ';
      font-size: 18px;
    }
  }

  @include breakpoint(medium down) {
    .item {
      .image {
        position: relative;

        &:after {
          content: '';
          display: block;
          width: 100%;
          border-top: 1px solid $powder-blue;
          transform: rotate(3deg);
          margin-top: 40px;
        }
      }

      &:nth-child(2n) {
        .image {
          &:after {
            transform: rotate(-3deg);
          }
        }
      }
    }
  }

  @include breakpoint(large) {
    .item {
      margin-bottom: 80px;

      .description {
        position: relative;

        &:after {
          content: '';
          display: block;
          width: 100%;
          border-top: 1px solid $powder-blue;
          transform: rotate(3deg);
          margin-top: 70px;
        }
      }

      &:nth-child(2n + 1) {
        .image {
          text-align: center;
        }
      }

      &:nth-child(2n) {
        .description {
          &:after {
            transform: rotate(-3deg);
          }
        }

        .content {
          order: 2;
        }

        .image {
          order: 1;
        }
      }
    }

    .title-3 {
      &:before {
        margin-right: 10px;
      }
    }
  }

  @include breakpoint(xxlarge) {
    .item {
      margin-bottom: 150px;

      .description {
        width: 75%;
      }
    }
  }
}

.s-adopters {

  .clients-list {
    margin-bottom: 40px;

    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;

    .item {
      margin: 0 30px 30px;
      font-weight: 600;

      &.add-your-company {
        width: 100%;
        a {
          display: inline-block;
          position: relative;
          color: $body-font-color;
          padding-left: 25px;
    
          &:before {
            position: absolute;
            top: 6px;
            left: 0;
            content: '';
            width: 16px;
            height: 16px;
            background: url('../img/plus.svg') no-repeat 50% 50%;
            background-size: auto;
          }
    
          &:hover {
            color: $primary-color;
          }
        }
      }

      img {
        filter: grayscale(1) invert(0.5);
        opacity: 0.7;
        max-height: 45px;
      }
    }
  }
}
